<template>
    <el-dialog v-model="dialogVisible" width="30%" title="添加常见缺陷" destroy-on-close center>
        <template #default>
            <el-form :model="flaw" label-width="100px" label-position="left">
                <el-form-item label="*缺陷描述">
                    <el-input type="textarea" v-model="flaw.flawDescription" placeholder="请输入缺陷描述" />
                </el-form-item>
              <el-form-item label="检测项类型">
                <el-select style="width: 200px;" v-model="flaw.checkItemType" placeholder="请选择检测项类型" clearable>
                  <el-option v-for="type in types" :value="type.checkItemType" :label="type.checkItemType"/>
                </el-select>
              </el-form-item>

              <el-form-item label="缺陷等级">
                <el-select style="width: 200px;" v-model="flaw.flawLevel" placeholder="请选择检测等级" clearable>
                  <el-option v-for="type in types" :value="type.flawLevel" :label="type.flawLevel"/>
                </el-select>
              </el-form-item>

            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addFlaw">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancelAddFlaw">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
// 引入我们申明的dict的api的js
import FlawRequest from '../../../api/flaw.js';
export default {
    props: ["visible"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加学生的操作结果
    data() {
        return {
            queryFlaw:{},
            types:{},//绑定查询的所有检查项类别
            flaw: {},// 绑定新增的缺陷信息
            dialogVisible: false,// 添加字典窗口的显示与隐藏
        }
    },
     methods: {
       loadFlawAll(){
         FlawRequest.loadFlawAll(res=>{
           this.types = res.data;
         })
       },

        /**
         * 取消添加事件
         */
        cancelAddFlaw(){
            this.flaw = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加信息
         */
        addFlaw(){
          FlawRequest.addFlaw(this.flaw,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加缺陷成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: '缺陷' + (res.msg.indexOf("dictDescription") > 0 ?"名称":"类型") + "重复"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加缺陷失败!'
                    });
                }
            });
        },
    }, mounted(props) {
      this.loadFlawAll();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
    }
}
</script>